<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>广告审核——查看详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="title">
        <el-button type="primary" @click="open">审核通过</el-button>
        <el-button type="danger" @click="editVisible = true">驳回</el-button>
      </div>
      <div class="content_diy">
        <ul>
          <li>
            <h2>广告信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>广告名称：</label>
                <p>{{list.advert_name}}</p>
              </dd>
              <dd>
                <label>广告封面图:</label>
                <p>
                  <img :src="list.advert_cover" preview="0" preview-text="广告封面图">
                </p>
              </dd>
              <dd>
                <label>广告介绍：</label>
                <div class="js">{{list.advert_introduce}}</div>
              </dd>
              <dd>
                <label>广告内容：</label>
                <div class="js" v-html="list.advert_content"></div>
              </dd>
              <dd v-if="showIF">
                <label>驳回原因：</label>
                <div class="js" v-html="list.turn_down"></div>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <!-- 弹出的驳回框 -->

    <el-dialog title="驳回原因" :visible.sync="editVisible" width="40%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="驳回原因" prop="desc">
          <el-input type="textarea" v-model.trim="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sure('ruleForm')">确 定 驳 回</el-button>
          <el-button @click="editVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "../../../http/api.js";
export default {
  data() {
    return {
      id: this.$route.query.id,
      list: {}, //数据
      editVisible: false, //默认驳回弹出框不显示
      ruleForm: {
        //驳回里面的textarea
        desc: ""
      },
      rules: {
        //验证规则
        desc: [{ required: true, message: "请填写驳回原因", trigger: "blur" }]
      },
      Token: sessionStorage.getItem("Token"),
       showIF: false //驳回内容是否显示！
    };
  },
  methods: {
    getData() {
      this.$post(api.advert_info, {
        token: this.Token,
        advert_id: this.id
      })
        .then(res => {
          if (res.status == "0") {
            this.list = res.data;
            //如果有驳回的 显示原因
             if(res.data.status=="2"){
               this.showIF=true
             }
          } else {
            this.$message.error(res.msg);
          }
          // 如果登录过期
          if (res.status == "relogin") {
            this.$message.error(res.msg);
            this.$router.push("/login");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    open() {
      //审核通过 按钮！
      this.$confirm("通过审核, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$post(api.advert_check, {
            token: this.Token,
            advert_id: this.id,
            type: 1
          })
            .then(res => {
              if (res.status == "0") {
                this.$message({
                  type: "success",
                  message: "审核已通过"
                });
                setTimeout(() => {
                  this.$router.push("/adreviewe");
                }, 1000);
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    sure(formName) {
      //确认驳回后：
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post(api.advert_check, {
            token: this.Token,
            advert_id: this.id,
            type: 2,
            turn_down: this.ruleForm.desc
          })
            .then(res => {
              if (res.status == "0") {
                this.$message({
                  type: "info",
                  message: "已驳回"
                });
                setTimeout(() => {
                  this.editVisible = false;
                  this.$router.push("/adreviewe");
                }, 1000);
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          this.$message({
            type: "error",
            message: "填写驳回原因"
          });
          return false;
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style scoped>
ul li {
  list-style: none;
}
.container .title {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li h2 {
  color: #f00;
  font-size: 18px;
}
.dl_diy {
  width: 60%;
  margin: 0 auto;
}
.dl_diy dd {
  display: flex;
  justify-content: flex-start;
  border: 1px solid #d2cccc;
  border-radius: 3px;
  margin-top: -1px;
}
.dl_diy dd label {
  font-size: 16px;
  font-weight: bold;
  flex: 2;
  padding: 10px 0;
  text-align: center;
  border-right: 1px solid #d2cccc;
}
.dl_diy dd p {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.dl_diy dd p img {
  max-width: 100%;
}
.dl_diy dd .js {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
<style >
.pswp__caption__center {
  text-align: center;
}
.dl_diy dd .js img{
 max-width: 100%!important;
}
</style>
